<template>
  <div class="add-form">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="addForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <!-- 富文本编辑器组件 -->
          <quill-editor v-model="ruleForm.articleBody"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="ruleForm.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleArticle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/articles'
// import { validateURL } from '@/utils/validate'

export default {
  name: 'addArticles',
  props: {
    ruleForm: {
      type: Object,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      // 表单验证
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
        // videoURL: [
        //   {
        //     required: true,
        //     message: '请输入文章内容',
        //     trigger: 'blur'
        //   }
        // {
        //   validator: validateURL,
        //   trigger: 'blur',
        //   message: '格式错误'
        // }
        // ]
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    // dialogFormH() {
    //   this.dialogFormVisible = false
    // },
    handleArticle() {
      this.$refs.addForm.validate(async valid => {
        if (!valid) return
        if (this.ruleForm.id) {
          await update(this.ruleForm)
          this.$emit('confirm', this.ruleForm)
        } else {
          // 可以发起添加文章的网络请求
          await add(this.ruleForm)
          this.$emit('confirm', this.ruleForm)
        }
        // 隐藏添加文章的对话框
        this.dialogFormVisible = false
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/.el-dialog__footer {
  text-align: right;
}
</style>
